<div class="toolbar"></div>
<div class="p-3">
    <div class="card mb-3">
        <h5 class="card-header">高德地图</h5>
        <div class="card-body">
            <p class="text-muted">对几个常用的地图方法进行了封装，提供了一个简单的地图显示指令。地图服务提供了原始地图API接口，可以使用几乎全部的地图接口。</p>
        </div>
    </div>
    <div class="card card-body mb-3">
        <div class="map-pad" #map="tsMap" tsMap (positionChange)="getPosition($event)"></div>
        <div class="text-right mt-2 m-btn" *ngIf="mapStatus">
            <button (click)="randomStyle()" class="btn btn-info">随机样式</button>
            <button (click)="randomCenter()" class="btn btn-white">切换中心</button>
            <button disabled (click)="getMyLocationInfo()" class="btn btn-white">浏览器定位</button>
        </div>
    </div>
    <div class="card">
        <div class="card-header border-bottom d-flex justify-content-between">
            <span>地图服务</span>
            <a href="http://lbs.amap.com/api/javascript-api/reference/math" target="_blank">参考文档</a>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-12 mb-2">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-white">地址名称</span>
                        </div>
                        <input id="search_input" #address="ngModel" ngModel type="text" class="form-control">
                    </div>
                </div>
                <div class="col-12 mb-2">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-white">坐标一</span>
                        </div>
                        <input #lng1="ngModel" ngModel type="text" class="form-control">
                        <div class="input-group-prepend input-group-append">
                            <span class="input-group-text bg-white">经度</span>
                        </div>
                        <input #lat1="ngModel" ngModel type="text" class="form-control">
                        <div class="input-group-append">
                            <span class="input-group-text bg-white">纬度</span>
                        </div>
                    </div>
                </div>
                <div class="col-12 mb-2">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-white">坐标二</span>
                        </div>
                        <input #lng2="ngModel" ngModel type="text" class="form-control">
                        <div class="input-group-prepend input-group-append">
                            <span class="input-group-text bg-white">经度</span>
                        </div>
                        <input #lat2="ngModel" ngModel type="text" class="form-control">
                        <div class="input-group-append">
                            <span class="input-group-text bg-white">纬度</span>
                        </div>
                    </div>
                </div>
                <div class="col-12 mb-2 m-btn">
                    <button (click)="getAddressInfo(address.value)" class="btn btn-white">
                        <i class="fa fa-location-arrow fa-fw"></i>地址解析
                    </button>
                    <button (click)="getPointInfo()" class="btn btn-white">
                        <i class="fa fa-map-marker fa-fw"></i>坐标解析
                    </button>
                    <button (click)="getPointDistance(lng1.value,lat1.value,lng2.value,lat2.value)" class="btn btn-white">
                        <i class="fa fa-map-signs fa-fw"></i>坐标距离
                    </button>
                </div>
                <div class="col-12">
                    <ts-prism [code]="consoleLog|json" language="json"></ts-prism>
                </div>
            </div>
        </div>
    </div>
</div>